<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .base-layout__header {
        height: 100px;
        background-color: aliceblue;
      }

      .base-layout__main {
        height: 400px;
        background-color: green;
      }

      .base-layout__footer {
        height: 100px;
        background-color: pink;
      }
    </style>
  </head>

  <body>
    <!-- 
      具名插槽：
        概念：给 slot 设置了 name 属性的，就叫做具名插槽，没有 name 的，其实有个隐藏的 default 名字

      使用具名插槽：

        通过 template 元素结合 v-slot 指令，来将这段 template 元素包裹的模板作为某个具名插槽的内容

        v-slot:插槽名
        简写
        #插槽名

     -->

    <div id="app"></div>

    <script type="module">
      import { createApp } from "./lib/vue3.esm.browser.js";

      const app = createApp({
        template: `
          <BaseLayout>
            <template #header>
              <p>头部</p>  
              <button>头部</button>
            </template> 
            
            <template v-slot:footer>
              <p>底部</p>  
              <button>底部</button>
            </template> 

              <h2>主体</h2>  
          </BaseLayout>
        `,
      });

      app.component("BaseLayout", {
        template: `
        
          <div class="base-layout">
            <header class="base-layout__header">
              <slot name="header"></slot>
            </header>  

            <main class="base-layout__main">
              <!-- 没有设置 name 的 插槽，有个默认名字为 default -->
              <slot></slot>  
            </main>  

            <footer class="base-layout__footer">
              <slot name="footer"></slot>  
            </footer>  
          </div>
        `,
      });

      app.mount("#app");
    </script>
  </body>
</html>
